<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
    <link rel="stylesheet" href="static/css/AnnouncementManagement.css">
</head>

<body>
    <div id="managment">
        <div class="box">
            <div class="ziti_1">公告设置</div>
            <div class="content">
                <textarea class="input" style="outline:none;margin: 0 auto;" placeholder="请输入公告" ></textarea>
            </div>
        </div>

        
        <div>
            <img src="../Manage/static/images/三角下.png" class="picture_1">
            <input class="choose" @click="chooseClick" type="text" :value="choice" readonly="readonly">
        </div>

        <div class="option" v-show="optionShow">
            <div class="triangle"> </div>
            <ul>
                <li  @click="handleSelect" class="ziti_2" v-for="(item,index) in department" :id="index" :key="index">{{department[index]}}</li>
            </ul>
        </div>

        <div class="buttun">
            <div class="ziti_3">保存</div>
            <img src="../Manage/static/images/kitekat-cat-8 1.png " class="picture">
        </div>
        
    </div>
</body>
<script>
    const c = window.cloud
    Vue.prototype.cloud = c
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    Vue.config.devtools = true;
    new Vue({
        el: "#managment",
        data() {
            return {
                optionShow:false,
                department: [
                    '网络研发部',
                    '秘书处',
                    'PC技术部',
                    'UI设计部',
                    '新媒体运营部',
                    '动画部',
                    '影视部',
                ],
                choice:'',
            }
        },
        methods: {
            chooseClick() {
                console.log("点击了chooseClicK");
                this.optionShow=!this.optionShow;
                console.log(this.optionShow);
            },

            handleSelect(e){
                console.log(e.target.id);
                this.choice=this.department[e.target.id];
                this.optionShow=!this.optionShow;
            },

            async initWx() {
                    //创建新的cloud实例
                    var c1 = new this.cloud.Cloud({
                        identityless: true,
                        // 资源方 AppID 填自己的
                        resourceAppid: 'wx96f760966921f98a',
                        // 资源方环境 ID	填自己的
                        resourceEnv: 'cloud1-8g54d6xb74e96e7d'
                    })
                    //初始化,使用await将异步转化为同步
                    await c1.init()
                    console.log('初始化完成');
                    this.cloud = c1
                    this.db = this.cloud.database()
                },
            
                
        },
        mounted(){
            this.choice='请选择部门';
        }
    })  

</script>

</html>